import React, {useState} from 'react';
import styles from "./index.module.less"
import {Form, Button, Input, message} from "antd";
import { LockOutlined, UserOutlined } from '@ant-design/icons';

import {useNavigate} from "react-router-dom";
import {postLoginAsync1,} from "@/store/slice/auth";
import {useAppDispatch} from "@/hooks";
function Login() {
    const navigate = useNavigate()

    // 1
    // console.log(store.getState())

    // 2
    // type TAuth = {
    //     auth:{
    //         token:string,
    //     }
    // }
    // console.log(useSelector(state => state))
    // console.log(useSelector((state:TAuth) => state.auth))

    // //3
    // const auth = useSelectorAuth()
    // console.log(auth)

    const dispatch = useAppDispatch()

    const [isLoading,setIsLoading] = useState<boolean>(false)
    // console.log(isLoading)
    // console.log(setIsLoading)

    const submitHandler = async(values:any)=>{
        try {
            setIsLoading(true);
            const result:any = await dispatch(postLoginAsync1(values))
            // console.log(isLoading)

            message.success(result.message)
            navigate("/")
        }catch (err){
            setIsLoading(false)
        }

    }


    return (
        <div className={styles.login}>
            <div>
                <h2>尚医通后台管理系统</h2>
                <Form
                    name="normal_login"
                    className="login-form"
                    onFinish={submitHandler}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: "不要急,请输入用户名"}]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: "慌么子,请输入密码" }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入密码"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button loading={isLoading} type="primary" htmlType="submit" className="login-form-button">
                            登陆
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Login;